<template>
    <el-dialog v-model="dialogVisible" title="商品" width="60%" :before-close="handleClose">
        <div class="oppo-goods-dialog">
            <el-form inline>
                <el-form-item label="商品名称">
                    <el-input style="width: 220px;" v-model="searchForm.name" clearable placeholder="商品名称" />
                </el-form-item>
                <el-form-item label="商品分类">
                    <el-tree-select style="width: 220px;" default-expand-all node-key="id" filterable
                        v-model="searchForm.cateid" :data="classOptions" check-strictly clearable
                        :render-after-expand="false" :props="{
                            label: 'name',
                            children: 'sub',
                        }" placeholder="分类">
                    </el-tree-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchFun">查询</el-button>
                </el-form-item>
            </el-form>

            <el-table v-loading="loading" @selection-change="handleSelectionChange" :data="tableData" border
                max-height="550" style="width: 100%">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column prop="date" label="商品名称">
                    <template #default="{ row }">
                        <div class="manage-info">
                            <el-image :preview-teleported="true" style="width: 50px; min-width: 50px; height: 50px"
                                :src="row.cover" :zoom-rate="1.2" :preview-src-list="[row.cover]" :initial-index="4"
                                fit="cover" class="img-box" />
                            <div class="right">
                                <div>
                                    <label>商品名称：</label>
                                    <span>{{ row.goods_name }} </span>
                                </div>
                                <div>
                                    <label>商品编号：</label>
                                    <span>{{ row.goods_code }} </span>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="goods_spec" label="规格" />
                <el-table-column prop="price_selling" label="售价(元)" />
            </el-table>
            <!-- <div style="display: flex;justify-content: center;">
                <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[20, 50, 100, 200]" layout="total,  prev, pager, next" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div> -->
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="submit" :disabled="selectGoods.length == 0"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { skuApi as listApi } from "@/plugins/api/shopping/manage";
import { listApi as classApi } from "@/plugins/api/shopping/class";

let props = defineProps({
    dataInfo: {
        type: Object,
        default: {}
    }
})
let searchForm = ref({})
let selectGoods = ref([])
function handleSelectionChange(arr) {
    selectGoods.value = [...arr]
}
let dialogVisible = ref(false);
function handleClose(done) {
    ElMessageBox.confirm("是否确定关闭此对话框?")
        .then(() => {
            done();
        })
        .catch(() => { });
}
let ruleForm = ref({})
function initFun() {
    ruleForm.value = {}
    searchForm.value = {}
    selectGoods.value = []

    dialogVisible.value = true;
    getData();
    getClass()
}
const emit = defineEmits(["selectGoodsFun"]);
function submit() {
    if (selectGoods.value.length == 0) return ElMessage.warning('请选择商品')

    dialogVisible.value = false;
    emit('selectGoodsFun', selectGoods.value)
}

//
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
function searchFun() {
    currentPage.value = 1;
    selectGoods.value = [];
    tableData.value = []
    getData();
}
const handleSizeChange = (val) => {
    pageSize.value = val;
    selectGoods.value = [];
    getData();
};
const handleCurrentChange = (val) => {
    currentPage.value = val;
    selectGoods.value = [];
    getData();
};
let tableData = ref([]);
let loading = ref(false)
function getData() {
    loading.value = true
    listApi({
        page: currentPage.value,
        pageSize: pageSize.value,
        name: searchForm.value.name,
        cateid: searchForm.value.cateid,
    }).then((res) => {
        tableData.value = res;
        // total.value = res.page.total;
        loading.value = false
    }).catch(() => {
        loading.value = false
    })
}

// 分类名称
let classOptions = ref([])
function getClass() {
    classApi({}).then(data => {
        classOptions.value = data
    })
}
onMounted(() => {

});
defineExpose({
    initFun,
});
</script>
<style scoped lang="scss">
.oppo-goods-dialog {
    .manage-info {
        display: flex;

        .img-box {
            align-self: center;
        }

        .right {
            align-self: center;
            font-size: 12px;
            margin-left: 5px;
            color: #407dcd;
        }
    }


}
</style>
  